{extend name="./theme/backend/base.html"}
{block name="content"}
<style type="text/css">
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input{vertical-align: top;}
.tip-wrap{ width: 600px; padding: 20px; margin: 20px auto; border:1px #e8e8e8 solid; background-color: #fffce2; text-align: center;}
.tip-wrap .tip-title{font-size:18px;margin-bottom: 30px;}
.attr_list .item .class{width: 80px; padding-right: 10px; padding-top: 15px;}
.attr_list .item .list{flex: 1; border:1px #afafaf dashed; padding: 10px; border-radius: 5px;}
.attr_list .item .list label:hover{cursor: pointer;}
.attr_list .item .list label{display: inline-block; margin: 0 10px 10px 0; padding: 5px 10px;}
.attr_list .item .list label.active{background-color: #0092DC; color: #FFF; border-radius: 5px;}
.attr_list .item{margin-bottom: 10px;}
.attr_list .item:last-child{margin-bottom: 0;}
.text-center,.text-center th{text-align: center;}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div class="wrap" id="app">
    <ul class="nav nav-tabs">
        <li class="active"><a href="{:url('mall/Goods/storage',['id'=>$id])}">产品库存管理</a></li>
    </ul>
    {empty name="attr_list"}
    <div class="tip-wrap">
        <div class="tip-title">该商品不存在规格，请先添加规格后再试</div>
        <a href="{:url('mall/Goods/edit',['id'=>$id])}">编辑该商品</a> | <a href="{:url('mall/Goods/index')}">商品管理</a>
    </div>
    {else/}
    <div class="well attr_list" id="attr_list">
        <div class="item flex flex-pack-justify" v-for="(item,index) in attr_list">
            <div class="class">{{item.name}}</div>
            <div class="list">
                <label v-for="child in item.child" :class="child.checked?'active':'aaaa'"  @click="select_attr_list(child.id)">{{child.attr_value}}</label>
            </div>
        </div>
    </div>
    <form method="post" class="js-ajax-form" action="term/listorders">
        <table class="table table-hover table-bordered text-center">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>{{attribute_union_string}}</th>
                    <th>货号</th>
                    <th>库存</th>
                    <th>库存预警值</th>
                    <th>商品条形码</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list">
                    <td>{{index+1}}</td>
                    <td>{{item.goods_attr}}</td>
                    <td><input type="text" :value="item.goods_sn" @keyup="set_attr_value" :data-ids="item.goods_attr_ids" data-act="goods_sn"/></td>
                    <td><input type="text" :value="item.stock"  @keyup="set_attr_value" :data-ids="item.goods_attr_ids" data-act="stock"/></td>
                    <td><input type="text" :value="item.warn_stock"  @keyup="set_attr_value" :data-ids="item.goods_attr_ids" data-act="warn_stock"/></td>
                    <td><input type="text" :value="item.bar_code"  @keyup="set_attr_value" :data-ids="item.goods_attr_ids" data-act="bar_code"/></td>
                </tr>
            </tbody>
        </table>
    </form>
    <div class="form-actions">
        <button type="submit" class="btn btn-primary js-ajax-submit" @click="saveUpdate">提交保存</button>
    </div>
    {/empty}
</div>
<script src="{$admin_assets_path}/js/common.js"></script>
<script>
    /*
    list:[
        {attr_id:10,goods_attr:"10-15",goods_attr_str:"红色-250X118",goods_sn:"",stock:0,warn_stock:1,bar_code:"6936983800013"},
        {attr_id:11,goods_attr:"11-15",goods_attr_str:"白色-250X118",goods_sn:"",stock:17,warn_stock:1,bar_code:"6936983800013"},
        {attr_id:12,goods_attr:"12-15",goods_attr_str:"黑色色-250X118",goods_sn:"",stock:12,warn_stock:1,bar_code:"6936983800013"}
    ],
    */
    var app = new Vue({
        el: '#app',
        data:{
            attr_list:[],
            attr_id:"",		//当前操作的属性id
            attribute_union_string:"属性组合",
            thumb:"images\/member.gif",
            nickname:"",
            list:[],
            list_comment:[],
            current_index:0,
            order_sn:"",
            content:"",
            has_change:false
        },
        mounted:function(){

        },
        beforeMount:function(){
            let attr_list = {$attr_list};
            this.attr_list = this.attr_list_function(attr_list,"init",{$attr_ids_default});
            this.list={$listGoodsStorage};
            console.log(this.list);
            
        },
        methods: {
        	attr_list_function:function(attr_list,act,attr_ids_default=[]){
	        	let arr=[];
	        	for(let i in attr_list){
	            	for(let j in attr_list[i].child){
		        		if(act=="init"){
                            let has_checked=false;
                            for(let index in attr_ids_default){
                                if(attr_ids_default[index]==attr_list[i].child[j].id){
                                    has_checked=true;
                                }
                            }
		        			attr_list[i].child[j].checked=has_checked;
		        		}
		        		if(act=="check_option"){
		        			if(this.attr_id==attr_list[i].child[j].id){
		        				attr_list[i].child[j].checked=!attr_list[i].child[j].checked;	
		        			}
		        		}
		        		if(act=="get_checked_id"){
		        			if(attr_list[i].child[j].checked){
		        				arr.push(attr_list[i].child[j].id);
		        			}
		        		}
                        
	        		}
	        	}
	        	if(act=="get_checked_id"){
	        		return arr;
	        	}
        		return attr_list;
        	},
        	saveUpdate:function(){
                if(!this.has_change){
                    layer.msg("保存成功",{shade:0.3},function(){
                        location.href="{:url('mall/goods/index')}";
                    });
                    return false;
                }
        		let that = this;
        		let ids = this.attr_list_function(this.attr_list,"get_checked_id");
        		console.log(ids);
        		if(ids.length==0){
        			layer.msg("请设置属性后再试"); return false;
        		}
        		new AjaxRequest({
        			url:"{:url('mall/Goods/storage',['id'=>$id])}",
        			param:{attr_data:that.list,act:"save_attr_group",id:{$id}},
                    is_original_data:true,
        			callBack:function(res){
        				console.log(res);
        				if(res.code==0){
        					layer.msg("保存成功",{shade:0.3},function(){
                                location.href="{:url('mall/goods/index')}";
                            });
        				}
        			}
        		});
        	},
            attr_selected:function(id){
                console.log(id);
            },
            select_attr_list:function(attr_id){
                console.log(attr_id);
                this.attr_id=attr_id;
                this.attr_list = this.attr_list_function(this.attr_list,"check_option");
                let that = this;
        		let ids = this.attr_list_function(this.attr_list,"get_checked_id");
        		if(ids.length==0){
        			this.list=[];
                    this.attribute_union_string="属性组合";
        			return false;
        		}
                this.has_change=true;
        		new AjaxRequest({
        			url:"{:url('mall/Goods/storage')}",
        			param:{attr_ids:ids,act:"get_attr_group",id:{$id}},
        			is_original_data:true,
        			callBack:function(res){
        				console.log(res);
        				if(res.code==0){
        					that.list = res.data;
                            that.attribute_union_string=res.data[0].attr_list_str;
        				}
        			}
        		});
            },
            set_attr_value:function(e){
                this.has_change=true;
                let ids=e.target.dataset.ids,act=e.target.dataset.act,value=e.target.value;
                console.log(act,this.list);
                let list = this.list;
                for(let i in list){
                    if(list[i].goods_attr_ids==ids){
                        if(act=="goods_sn"){
                            list[i].goods_sn=value;
                        }
                        if(act=="stock"){
                            list[i].stock=value;
                        }
                        if(act=="warn_stock"){
                            list[i].warn_stock=value;
                        }
                        if(act=="bar_code"){
                            list[i].bar_code=value;
                        }
                    }
                }
                this.list=list;
            }
        }
    })
</script>
{/block}